<template>
  <div class="search-container">
    <!-- 
事件监听
Search 组件提供了 search 和 cancel 事件，
search 事件在点击键盘上的搜索/回车按钮后触发，
cancel 事件在点击搜索框右侧取消按钮时触发。
如果van-search外边有form包裹并且action有内容，
那么在ios手机上弹出的键盘会有搜索按钮
     -->
    <form class="xxc-s" action="/">
  <van-search
    v-model="searchText"
    show-action
    placeholder="请输入搜索关键词"
    background="#3296fa"
    @search="onSearch"
    @cancel="onCancel"
     @focus="isResultShow = false"
  />
</form>
<!-- 获取焦点，隐藏搜索结果（隐藏搜索结果之后，
此时搜索框内一般是有内容的，
所以这时会将联想建议显示出来） -->
<!-- 在父组件中的建议项子组件中监听search事件，定义自定义事件和函数 -->
<SearchResult v-if="isResultShow" :searchText="searchText"></SearchResult>
<SearchSuggestion v-else-if="searchText" :searchText="searchText"
@search="onSearch"></SearchSuggestion>

<SearchHistory v-else :searchHistory="searchHistories"
 @search="onSearch" @delect="searchHistories = []"></SearchHistory>
  </div>
</template>

<script>
// 数据持久化一般都在getItem中利用短路或 || [],
// 不然就会报啥啥啥null的错误
import SearchHistory from './components/search-history'
import SearchSuggestion from './components/search-suggestion'
import SearchResult from './components/search-result'
import {setItem,getItem} from '@/utils/storage'
  export default {
    name: "SearchIndex",
    components: {
      SearchHistory,
      SearchSuggestion,
      SearchResult
    },
    props: {},
    data() {
      return {
          searchText: '',
           // 控制搜索结果的显示与否
          isResultShow: false,

          searchHistories: getItem('TOUTIAO_SEARCH_HISTORIES') || []
      };
    },
    computed: {},
    watch: {
      searchHistories(value){
        setItem('TOUTIAO_SEARCH_HISTORIES', value)

      }
    },
    created() {},
    methods: {
    onSearch(val) {   
     this.searchText = val
     console.log(val);
     const index = this.searchHistories.indexOf(val) 
     /* 为什么不能这样，因为如果这个样子，那么最后输出b，这个数组会以为它已经输入
     而不会进行最前面显示，所以，应该先干掉重复的，然后才可以保证它在最前面
     if(index === -1){
      this.searchHistories.unshift(val)
      
     } */
      if(index !== -1){
      this.searchHistories.splice(index,1)
      
     } 
     this.searchHistories.unshift(val)
     this.isResultShow = true
  
    },
    onCancel() {
      this.$router.back()
    },
    }
  };
</script>

<style scoped lang="less">
.search-container {
  .van-search__action {
    color: #fff;
  }
  .xxc-s{
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 3;
  }
}
</style>